<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="zh-CN">
    <meta content="1 days" name="revisit-after" />
    <meta name="robots" content="all">
    <meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="false" id="twcClient" name="twcClient" />
    <link rel="stylesheet" href="css/recomm.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/common.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>爱仁医生举荐</title>
</head>

<body>
    <div class="recomm" id="recomm">
        <div class="top"></div>
        <div class="doc_list" v-if="docList">
            <div class="item" v-for="item in docList"  @click.stop ="pickDown(item.data.id)">
                <div class="pic">
                    <img :src="item.cover_pic+'/750'" alt="">
                </div>
                <div :class="item.data.id == currentId ? 'pick padd':'pick'">
                    <div class="rol1">{{item.title}}<span>({{item.data.position}})</span></div>
                    <div class="rol2" v-if="item.data.id != currentId">展开</div>
                    <div class="rol3" v-if="item.data.id == currentId" @click.stop ="pickUp()">收起</div>
                </div>
                <transition name="slide-fade">
                    <div class="intro" v-if="item.data.id == currentId">
                        <div class="row1">
                            <div class="rol1">专家介绍</div>
                            <div class="rol2">{{item.data.intro}}</div>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
        <div class="server">
            <img src="images/code.png" alt="">
            <div class="row1">长按识别二维码联系客服</div>
            <div class="row2">客服电话：
                <a href="tel:13126887722">13126887722</a>
            </div>
        </div>
      
    </div>
</body>

</html>
<script>
    var app4 = new Vue({
        el: '#recomm',
        data() {
            return {
                SetFun:'',
                docList:'',
                currentId:''
            };
        },
        methods: {
            getDoc(){
                var _self = this;
                axios.get('http://airen.2020-2020.com/v1/positions/155')
                .then(function(response){
                _self.docList = response.data.data.items;
                console.log(_self.docList);
                })
            },
            pickDown(idx){
                this.currentId = idx;
            },
            pickUp(){
                this.currentId ='';
            }
        },
        created() {

        },
        mounted() {
            this.getDoc();
            var _self = this;
            this.SetFun = new window.SetFun();
            _self.SetFun.goShare(false,{
                    desc:'举荐医生'
            })
            }
    })
</script>